<!--
 * @Author: 谢陈洁
 * @Date: 2025-05-22 18:17:58
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-06-27 16:53:53
 * @Description: file content
-->
<template>
  <layout-main>
    <template #banner>
      <div>
        ss
      </div>
    </template>
    <div>
      <div class="article">
        <el-row :gutter="20">
          <!-- 文章预览 -->
          <el-col :sm="18" :xs="24">
            <el-card>
              <MdPreview :theme="theme?'dark':'light'" :id="id" :modelValue="info.content" />
              <div class="author">
                <div class="author-name">作者：<span>{{ info.article_author?.nickname}}</span></div>
                <div class="author-time">时间：<span>{{info.createdAt}}</span></div>
                <div class="author-like">点赞：<span>{{info.thumb_up}}</span></div>
                <div class="author-comment">声明: 此文章版权归本站所有，如有转载，请注明来自原作者</div>

              </div>
            </el-card>
          </el-col>
          <!-- 侧边目录 -->
          <el-col :sm="6" :xs="0">
            <el-affix :offset="80">
              <el-card header="目录">
                <MdCatalog class="md-catalog" :editorId="id" :scrollElement="scrollElement"
                  :scrollElementOffsetTop="60" />
              </el-card>
            </el-affix>
          </el-col>
        </el-row>
      </div>
    </div>
  </layout-main>
</template>
<script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
import { useBasicStore } from '@/stores/basic';
import { storeToRefs } from 'pinia';
import { fecthArticleDetail } from '@/service/module/article';
const basicStore = useBasicStore();
const {theme} = storeToRefs(basicStore); // 获取主题模式
const id = 'preview-only';
const scrollElement = document.body; // 滚动元素
const route = useRoute()
const info = ref({});
const fetchData = async ()=>{
  const id = route.params.id;
  if(!id) return;
  const res = await fecthArticleDetail(id);
  info.value = res;
  console.log(res);
} 
onMounted(()=>{
  fetchData()
})

</script>
<style lang="scss" scoped>
.author {
  padding: 20px 10px;
  font-size: 14px;
  color: #666;
  line-height: 2;
}
.md-catalog {
  padding: 10px;
  font-size: 14px;
  color: #666;
  line-height: 2;
}
</style>